<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>测试 - layui</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="css/cunjxc.css" />
  <link rel="stylesheet" href="css/flex.css" />

</head>

<body>
  <div class="container">
    <div class="top">
      一村九园可视化管理村级平台
    </div>
    <div class="box s-b">
      <div class="box_left">
        <!-- 顶部标题 -->
        <div class="aj-c">
          <div class="left_xzzc aj-c">乡村收入/支出</div>
        </div>
        <!-- 收入支出的echarts -->
        <div class="xzzc_top_e">

        </div>
        <div class="aj-c mt-64 mb-30">
          <div class="left_xzzc aj-c">天气</div>
        </div>
        <div class="xzzc_bottom_e s-c-b ">
          <div class="j-c">
            <div class="staijianc_noactive aj-c ml-16 shui" onclick="days('shui')"> 水情 </div>
            <div class="staijianc_noactive aj-c ml-16 yu" onclick="days('yu')"> 雨情 </div>
            <div class="staijianc_noactive aj-c ml-16 tu" onclick="days('tu')"> 土壤</br>pH值</div>
          </div>
          <!-- 天气echarts -->
          <div class="shuiq">

          </div>
        </div>


      </div>
      <div class="box_center">
        <!-- 地图区域 -->
        <div class="box_center_top aj-c s-b">
          <div class="box_center_top_box">
            <div class="box_center_top_left aj-c mb-36">
              <div class="">
                <div class="aj-c num">250104m²</div>
                <div class="aj-c title">面积</div>
              </div>
            </div>
            <div class="box_center_top_left aj-c mb-36">
              <div class="">
                <div class="aj-c num">98</div>
                <div class="aj-c title">公共资源</div>
              </div>
            </div>
            <div class="box_center_top_left aj-c mb-36">
              <div class="">
                <div class="aj-c num">2569703</div>
                <div class="aj-c title">人口</div>
              </div>
            </div>
            <div class="box_center_top_left aj-c mb-36">
              <div class="">
                <div class="aj-c num">186</div>
                <div class="aj-c title">监控</div>
              </div>
            </div>
          </div>
          <!-- 地图echarts -->
          <div class="maps">

          </div>

          <div class="box_center_top_box">
            <div class="box_center_top_left aj-c mb-36">
              <div class="">
                <div class="aj-c num">2503m²</div>
                <div class="aj-c title">宅地基</div>
              </div>
            </div>
            <div class="box_center_top_left aj-c mb-36">
              <div class="">
                <div class="aj-c num">2503m²</div>
                <div class="aj-c title">土地承包经营</div>
              </div>
            </div>
            <div class="box_center_top_left aj-c mb-36">
              <div class="">
                <div class="aj-c num">2503m²</div>
                <div class="aj-c title">基本农田</div>
              </div>
            </div>
            <div class="box_center_top_left aj-c mb-36">
              <div class="">
                <div class="aj-c num">2503m²</div>
                <div class="aj-c title">高标准农田</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 党员网格 -->
        <div class="box_center_center mt-20 ">
          <div class=" ">
            <div class=" aj-c boix-zhi">党员网格</div>
          </div>
          <div class="boix-tab">
            <div class="flex s-b h-38 " style="color: #A5B6D3;">
              <div class="aj-c" style=" width: 20%;">姓名</div>
              <div class="aj-c" style=" width: 20%;">职务</div>
              <div class="aj-c" style=" width: 20%;">电话</div>
              <div class="aj-c" style=" width: 20%;">户数</div>
              <div class="aj-c" style=" width: 20%;">人口</div>
            </div>
            <div class="flex s-b h-38 boix-tab_active">
              <div class="aj-c" style=" width: 20%;">萨拉米</div>
              <div class="aj-c" style=" width: 20%;">村长</div>
              <div class="aj-c" style=" width: 20%;">18625357193</div>
              <div class="aj-c" style=" width: 20%;">1</div>
              <div class="aj-c" style=" width: 20%;">5</div>
            </div>
            <div class="flex s-b h-38  ">
              <div class="aj-c" style=" width: 20%;">萨拉米</div>
              <div class="aj-c" style=" width: 20%;">村长</div>
              <div class="aj-c" style=" width: 20%;">18625357193</div>
              <div class="aj-c" style=" width: 20%;">1</div>
              <div class="aj-c" style=" width: 20%;">5</div>
            </div>
            <div class="flex s-b h-38 boix-tab_active">
              <div class="aj-c" style=" width: 20%;">萨拉米</div>
              <div class="aj-c" style=" width: 20%;">村长</div>
              <div class="aj-c" style=" width: 20%;">18625357193</div>
              <div class="aj-c" style=" width: 20%;">1</div>
              <div class="aj-c" style=" width: 20%;">5</div>
            </div>
            <div class="flex s-b h-38  ">
              <div class="aj-c" style=" width: 20%;">萨拉米</div>
              <div class="aj-c" style=" width: 20%;">村长</div>
              <div class="aj-c" style=" width: 20%;">18625357193</div>
              <div class="aj-c" style=" width: 20%;">1</div>
              <div class="aj-c" style=" width: 20%;">5</div>
            </div>
          </div>
        </div>
        <!-- tab切换区域 -->
        <div class="j-c ml-75">
          <div class="box_center_bottom_item flex">
            <div class="bottom_item_bg aj-c xc" onclick="tabs('xc')">数字乡村</div>
            <div class="bottom_item_bg aj-c gy" onclick="tabs('gy')">数字果园</div>
            <div class="bottom_item_bg aj-c cy" onclick="tabs('cy')">数字菜园</div>
          </div>
        </div>


      </div>
      <div class="box_right">
        <div class="aj-c">
          <div class="left_xzzc aj-c">网络化管理</div>
        </div>
        <!-- 网络化管理TAB·切换 -->
        <div class="box_right_tab s-b aj-c ml-16 mt-24">
          <div class="  jksb  cz" onclick="jksb('cz')">
            <div class="aj-c">3</div>
            <div class="aj-c mt-5">村组</div>
          </div>
          <div class="  jksb  nh" onclick="jksb('nh')">
            <div class="aj-c">1200</div>
            <div class="aj-c mt-5">农户</div>
          </div>
          <div class="  jksb  tsrq" onclick="jksb('tsrq')">
            <div class="aj-c">56</div>
            <div class="aj-c mt-5">特殊人群</div>
          </div>
        </div>
        <!-- 网络化管理echarts -->
        <div class="box_right_top mt-24 s-b aj-c">

          <div class="box_right_top_quan">

          </div>

        </div>

        <div class=" mt-28">
          <div class="left_xzzc   aj-c">灾害预警</div>
          <div class="mt-40 flex zhyj">
            <!-- // 灾害预警echarts -->
            <div class="left-xzzc_left  aj-c"></div>
            <div class="left-xzzc_list">
              <div class="flex title mb-23">
                <div class="aj-c" style="width: 33.33%;">类型</div>
                <div class="aj-c" style="width: 33.33%;">次数</div>
                <div class="aj-c" style="width: 33.33%;">时间</div>
              </div>
              <div class="flex value mb-23">
                <div class="aj-c" style="width: 33.33%;">泥石流</div>
                <div class="aj-c" style="width: 33.33%;">20</div>
                <div class="aj-c" style="width: 33.33%;">2022-05-02</div>
              </div>
              <div class="flex value mb-23">
                <div class="aj-c" style="width: 33.33%;">泥石流</div>
                <div class="aj-c" style="width: 33.33%;">20</div>
                <div class="aj-c" style="width: 33.33%;">2022-05-02</div>
              </div>
              <div class="flex value mb-23">
                <div class="aj-c" style="width: 33.33%;">泥石流</div>
                <div class="aj-c" style="width: 33.33%;">20</div>
                <div class="aj-c" style="width: 33.33%;">2022-05-02</div>
              </div>
              <div class="flex value mb-23">
                <div class="aj-c" style="width: 33.33%;">泥石流</div>
                <div class="aj-c" style="width: 33.33%;">20</div>
                <div class="aj-c" style="width: 33.33%;">2022-05-02</div>
              </div>
              <div class="flex value-active mb-23">
                <div class="aj-c" style="width: 33.33%;">泥石流</div>
                <div class="aj-c" style="width: 33.33%;">20</div>
                <div class="aj-c" style="width: 33.33%;">2022-05-02</div>
              </div>
              <div class="flex value-active mb-23">
                <div class="aj-c" style="width: 33.33%;">泥石流</div>
                <div class="aj-c" style="width: 33.33%;">20</div>
                <div class="aj-c" style="width: 33.33%;">2022-05-02</div>
              </div>


            </div>
          </div>
        </div>




      </div>
    </div>
  </div>
  <script src="js/jquery-3.4.1.min.js"></script>

  <script src="js/flexible.js"></script>
  <script src="js/echarts.min.js"></script>
  <script type="text/javascript" src="js/echarts-gl.min.js"></script>
  <script type="text/javascript" src="js/geoCitys.js"></script>
  <script src="js/cunjixc.js"></script>

  <!-- 先引入jquery -->
  <script src="layui/layui.js"></script>
  <script>
    // (function () {
    // 底部tab跳转
    document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c cy';
    document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c gy '
    document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c xc box_center_bottom_item_active'

    // 网格话管理默认选中
    document.getElementsByClassName('cz')[0].className = 'jksb cz bsyq_item_active';
    document.getElementsByClassName('nh')[0].className = 'jksb nh'
    document.getElementsByClassName('tsrq')[0].className = 'jksb tsrq'
    // 天气默认选中
    document.getElementsByClassName('shui')[0].className = 'staijianc_noactive aj-c ml-16 shui staijianc_active';
    document.getElementsByClassName('yu')[0].className = ' staijianc_noactive aj-c ml-16 yu '
    document.getElementsByClassName('tu')[0].className = ' staijianc_noactive aj-c ml-16 tu '
    shuiq([130, 140, 230, 40, 1030])

    function tabs(value) {
      switch (value) {
        case 'cy':
          window.location.href = './cunjicy.html'

          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c xc box_center_bottom_item_active';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c cy '
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c cy'

          break;
        case 'gy':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c xc  ';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c cy box_center_bottom_item_active'
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c cy'
          window.location.href = './cunjigy.html'

          break;
        case 'xc':
          document.getElementsByClassName('cy')[0].className = 'bottom_item_bg aj-c xc ';
          document.getElementsByClassName('gy')[0].className = 'bottom_item_bg aj-c cy '
          document.getElementsByClassName('xc')[0].className = 'bottom_item_bg aj-c cy box_center_bottom_item_active'
          window.location.href = './cunjixc.html'
          break;

        default:
          break;
      }
    }
    // 天气
    function days(value) {
      switch (value) {
        case 'shui':
          document.getElementsByClassName('shui')[0].className = 'staijianc_noactive aj-c ml-16 shui staijianc_active';
          document.getElementsByClassName('yu')[0].className = ' staijianc_noactive aj-c ml-16 yu '
          document.getElementsByClassName('tu')[0].className = ' staijianc_noactive aj-c ml-16 tu '
          shuiq([130, 140, 230, 40, 1030])

          break;
        case 'yu':
          document.getElementsByClassName('shui')[0].className = 'staijianc_noactive aj-c ml-16 shui  ';
          document.getElementsByClassName('yu')[0].className = ' staijianc_noactive aj-c ml-16 yu staijianc_active'
          document.getElementsByClassName('tu')[0].className = ' staijianc_noactive aj-c ml-16 tu '
          shuiq([30, 240, 130, 140, 1030])

          break;
        case 'tu':
          document.getElementsByClassName('shui')[0].className = 'staijianc_noactive aj-c ml-16 shui ';
          document.getElementsByClassName('yu')[0].className = ' staijianc_noactive aj-c ml-16 yu '
          document.getElementsByClassName('tu')[0].className = ' staijianc_noactive aj-c ml-16 tu staijianc_active'
          shuiq([130, 140, 130, 240, 1030])

          break;
        default:
          break;
      }
    }
    function shi() {
      document.getElementsByClassName('shi')[0].className = 'bsyq_item aj-c mb-40 shi bsyq_item_active';
      document.getElementsByClassName('sheng')[0].className = 'bsyq_item aj-c mb-40 sheng'
      document.getElementsByClassName('china')[0].className = 'bsyq_item aj-c mb-40 china'

    }
    function sheng() {
      document.getElementsByClassName('shi')[0].className = 'bsyq_item aj-c mb-40 shi';

      document.getElementsByClassName('sheng')[0].className = 'bsyq_item aj-c mb-40 sheng bsyq_item_active'
      document.getElementsByClassName('china')[0].className = 'bsyq_item aj-c mb-40 china'


    }
    function china() {
      document.getElementsByClassName('shi')[0].className = 'bsyq_item aj-c mb-40 shi';

      document.getElementsByClassName('sheng')[0].className = 'bsyq_item aj-c mb-40 sheng'
      document.getElementsByClassName('china')[0].className = 'bsyq_item aj-c mb-40 china bsyq_item_active'

    }

    // 网格化管理
    function jksb(value) {
      switch (value) {

        case 'cz':
          document.getElementsByClassName('cz')[0].className = 'jksb cz bsyq_item_active';
          document.getElementsByClassName('nh')[0].className = 'jksb nh'
          document.getElementsByClassName('tsrq')[0].className = 'jksb tsrq'
          box_right_top_quan([24, 135, 145, 65, 67, 55])

          break;
        case 'nh':
          document.getElementsByClassName('cz')[0].className = 'jksb cz';
          document.getElementsByClassName('nh')[0].className = 'jksb nh bsyq_item_active'
          document.getElementsByClassName('tsrq')[0].className = 'jksb tsrq'
          box_right_top_quan([134, 35, 145, 165, 67, 55])

          break;
        case 'tsrq':
          document.getElementsByClassName('cz')[0].className = 'jksb cz';
          document.getElementsByClassName('nh')[0].className = 'jksb nh'
          document.getElementsByClassName('tsrq')[0].className = 'jksb tsrq bsyq_item_active'
          box_right_top_quan([134, 35, 245, 165, 67, 55])

          break;
        default:
          break;
      }
    }
    var afyjList = document.querySelectorAll('.box_right_top_list_item')
    afyjList.forEach((i, index1, arr) => {
      i.onclick = (e) => {
        i.className = 'flex s-b mt-18 box_right_top_list_item box_right_top_list_active'
        console.log(i, 'i')
      }
    });

    // }
  </script>
  <!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->


  <script>
    // 收入支出的echarts
    xzzc_top_e([6000, 6000, 6000, 6000, 6000, 5000], [3012, 1230, 3790, 2349, 1654, 1230])
    // <!-- 天气echarts --> 
    shuiq([130, 140, 230, 40, 1030])
    // 网格化管理
    box_right_top_quan([34, 35, 45, 65, 67, 55])
    // 灾害预警
    leftxzzc_left()
    // 地图
    maps()
  </script>
</body>

</html>